<template>
  <div>
    <transition
      name="slide-fade" mode="out-in"
    >
      <custom-container
        class="sub-member"
        v-if="!detailVisible">
        <custom-container-header no-spacing>
          <el-form :model="filters" ref="form" :disabled="loading"
                   inline size="medium"
                   @submit.native.prevent="submitSearch"
          >
            <el-form-item label="数据汇总:">
              <!--<el-date-picker-->
                <!--v-model="filters.date"-->
                <!--type="daterange"-->
                <!--start-placeholder="开始日期"-->
                <!--end-placeholder="结束日期"-->
                <!--:picker-options="{disabledDate: beforeToday.disabledDate, shortcuts: pickerWeekStep.shortcuts}"-->
                <!--value-format="timestamp"-->
                <!--:default-time="['00:00:00', '23:59:59']"-->
              <!--&gt;-->
              <!--</el-date-picker>-->
              <el-date-picker
                v-model="filters.date"
                type="datetimerange"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :picker-options="{disabledDate: beforeToday.disabledDate, shortcuts: pickerWeekStep.shortcuts}"
                value-format="timestamp"
                :default-time="['00:00:00', '23:59:59']"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="会员账户:">
              <el-input v-model.trim="memberAmount" placeholder="请输入内容"></el-input>
            </el-form-item>
            <el-form-item>
              <el-checkbox v-model="fuzzySearch">模糊搜索</el-checkbox>
            </el-form-item>
            <el-form-item label="在线状态:">
              <el-select v-model="filters.status">
                <el-option
                  v-for="item in consts.ONLINE_STATUS"
                  :label="item.name"
                  :value="item.value"
                  :key="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="会员注册时间:">
              <el-date-picker
                v-model="filters.registerDate"
                type="datetimerange"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :picker-options="{disabledDate: beforeToday.disabledDate, shortcuts: pickerWeekStep.shortcuts}"
                value-format="yyyy-MM-dd HH:mm:ss"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" native-type="submit">查询</el-button>
            </el-form-item>
          </el-form>
        </custom-container-header>
        <custom-container-body>
          <el-table :data="tableData.list" :loading="loading" element-loading-text="加载中..." border border-radius
                    :summary-method="getSummaries"
                    :local-summary-method="getLocalSummaries"
                    show-summary
                    show-local-summary
                    @sort-change="sortChange"
          >
            <el-table-column
              align="center"
              width="170px"
              prop="register_date"
              label="注册时间">
              <template slot-scope="{row}">
                {{row.register_date | toTime}}
              </template>
            </el-table-column>

            <el-table-column
              align="center"
              label="会员账户">
              <template slot-scope="{row}">
                <member-cell
                  align="center"
                  :username="row.username" :search-key="filters.username" :online="row.online"></member-cell>
              </template>
            </el-table-column>

            <el-table-column
              prop="rechargeAmount"
              sortable="custom"
              align="center"
              label="存款金额">
              <template slot-scope="{row}">
                {{row.rechargeAmount | currency}}
              </template>
            </el-table-column>

            <el-table-column
              prop="withdrawAmount"
              sortable="custom"
              align="center"
              label="提款金额">
              <template slot-scope="{row}">
                {{row.withdrawAmount | currency}}
              </template>
            </el-table-column>

            <el-table-column
              prop="betEffectAmount"
              sortable="custom"
              align="center"
              label="有效投注额"
            >
              <template slot-scope="{row}">
                {{row.betEffectAmount | currency}}
              </template>
            </el-table-column>

            <el-table-column
              prop="bettingAmount"
              sortable="custom"
              align="center"
              label="投注总额"
            >
              <template slot-scope="{row}">
                {{row.bettingAmount | currency}}
              </template>
            </el-table-column>

            <el-table-column
              prop="betWinAmount"
              sortable="custom"
              align="center"
              label="公司输赢"
            >
              <template slot-scope="{row}">
                <money-text :negate="true" :value="row.betWinAmount"></money-text>
              </template>
            </el-table-column>

            <el-table-column
              align="center"
              label="操作"
              width="180"
            >
              <template slot-scope="{row}">
                <el-button
                  type="link"
                  size="small"
                  @click="openMemberDetail(row)"
                >
                  查看详情
                </el-button>
                <el-button
                  type="link"
                  size="small"
                  v-if="isCreditUp"
                  @click="openCreditUp(row)"
                >
                  上分
                </el-button>
              </template>
            </el-table-column>

            <template slot="empty">
              <div class="el-table__empty">
                <svg-icon class="el-table__empty-icon" icon-class="grid-empty-2"></svg-icon>
                <div class="el-table-text">暂无数据</div>
              </div>
            </template>
          </el-table>
          <div class="el-pagination-container">
            <el-pagination
              bordered
              @size-change="gridSizeChange" @current-change="gridCurrentChange"
              :current-page="filters.page" :page-size="filters.size"
              :total="tableData.total">
            </el-pagination>
            <el-warning>红色负数代表会员盈利，绿色正数代表公司盈利</el-warning>
          </div>
        </custom-container-body>
      </custom-container>
      <component
        :is="detailName"
        :info="detailProps"
        v-else
      ></component>
    </transition>
  </div>
</template>

<script type="text/jsx">

  import {lowLevelListApi as getApi} from '@/services/api/low-level';

  import {detailContent, grid, pickerOption} from '@/build';

  import SubMemberDetail from './sub-member-detail';

  export default {
    name: 'sub-member',

    mixins: [detailContent, grid, pickerOption],

    components: {
      SubMemberDetail
    },

    props: {
      username: String,
    },

    data() {
      return {
        filters: {
          // date: undefined,
          // registerDate: undefined,
          date: [moment(new Date('2018-01-01 00:00:00')).valueOf(), moment(new Date().setHours(23,59,59,59)).valueOf()],
          registerDate: [moment(new Date('2018-01-01 00:00:00')).format('YYYY-MM-DD 00:00:00'), moment(new Date()).format('YYYY-MM-DD 23:59:59')],
          username: undefined,
          status: undefined,
          orderField: undefined,
          orderType: undefined,
          page: undefined,
          size: undefined,
          userNameTerm:undefined,
        },
        memberAmount:undefined,
        currentDate: undefined,
        currentRow: undefined,
        tableData: {
          list: [],
          total: 0
        },
        statistic: [
          {
            index: 2,
            prop: 'tableData.sum.rechargeAmount',
            format: (value) => {
              return <div>{_.currency(value)}</div>;
            },
          },
          {
            index: 3,
            prop: 'tableData.sum.withdrawAmount',
            format: (value) => {
              return <div>{_.currency(value)}</div>;
            }
          },
          {
            index: 4,
            prop: 'tableData.sum.betEffectAmount',
            format: (value) => {
              return <div>{_.currency(value)}</div>;
            }
          },
          {
            index: 5,
            prop: 'tableData.sum.bettingAmount',
            format: (value) => {
              return <div>{_.currency(value)}</div>;
            }
          },
          {
            index: 6,
            prop: 'tableData.sum.betWinAmount',
            format: (value) => {
              return <money-text negate={true} value={value}></money-text>;
            }
          },
        ],
        fuzzySearch: false,
      };
    },

    methods: {
      openMemberDetail(row) {
        this.$memberDetail({
          info: {
            username: row.username,
            id: row.id,
            filters: this.filters,
          },
          callback: action => {
            if (action === 'success') {
              this.doGet({action: 'getGrid'});
            }
          }
        });
      },
      openCreditUp(row) {
        this.$creditUp({
          info: row,
          callback: action => {
            if (action === 'success') {
              this.doGet({action: 'getGrid'});
            }
          }
        });
      },
      closeDetail() {
        this.detailVisible = false;
        this.$router.push({name: 'lower-level-center'});
      },
      submitSearch(){
      	this.filters.page = 1;
      	this.getAll();
      }
    },

    watch: {
      '$route.params.username': {
        handler(username) {
          if (username) {
            this.openDetail({detailName: 'sub-member-detail', props: {
                username,
                filters: this.filters,
                currentDate: this.currentDate
              }});
          } else {
            this.closeDetail();
          }
        },
        immediate: true
      }
    },

    computed: {
      ...mapGetters([
        'isCreditUp'
      ]),
      ...mapState({
        creditStatus: state => state.creditStatus
      }),
    },

    mounted() {
      this.bindGet(getApi, 'tableData', {
        action: 'getGrid',
        sendingData: 'filters',
        beforeSend: data => {
          if(this.fuzzySearch){
            data.username = this.memberAmount;
            data.userNameTerm = undefined;
          }else{
            data.userNameTerm = this.memberAmount;
            data.username = undefined;
          }
          return data;
        },
        afterSuccess: () => {
          this.currentDate = this.filters.date;
        }
      });

      this.getAll();

      this.$store.dispatch(types.GET_CREDIT_STATUS);

      this.$global.bus.$emit('update:child-count');
    }
  };
</script>

<style lang="scss" scoped>
  @include b(sub-member) {
  }


</style>
